<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset = UTF-8">
    <title>联网测试</title>
    <style>
        h1 {
            font-size: 18pt;
            background: #AAAAEE;
            padding: 5px;
        }
        table tr th {
            background: #DDDDEE;
            margin: 3px;
            padding: 3px;
        }
        table tr td {
            background: #EEEEEE;
            margin: 3px;
            padding: 3px;
        }
        ul li {
            color: #333366;
        }
    </style>
</head>
<body onload="inital();">
    <header>
        <h1>联网测试</h1>
    </header>
    <article>
        <input type = "button" id = "openbtn" onclick = "doOpen();" value="连接服务器"/>
        <input type = "button" id = "closebtn" onclick = "doClose();" value = "断开连接"/>
        <hr>
        <form onsubmit="return doAction();">
            <table>
                <tr>
                    <th>用户：</th>
                    <td>
                        <input type = "text" id ="name" size = "10">
                    </td>
                </tr>
                <tr>
                    <th>消息：</th>
                    <td>
                        <select id = "to" >
                            <option value="all" >所有人</option>
                        </select>
                        <br />
                        <input type = "text" id = "message" size = "40">
                        <input type = "submit" value = "发送">
                    </td>
                </tr>
            </table>
            </form>
            <hr>
            <ul id = "msg"> </ul>
    </article>
   
</body>
<script src="http://39.97.245.109:8080/socket/socket.io.js"></script>
<script>
    function inital(){
        msg = document.getElementById("msg"); //设置全局变量msg
        document.getElementById("closebtn").disabled = true;
    }

    function doOpen(){
        if(document.querySelector('#name').value == ""){
            alert("缺少用户名");
            return;
        }
        socket = new WebSocket("ws://39.97.245.10:8080");

        //向服务器发送用户名
        socket.addEventListener("open",function(e){
            var str1 = document.getElementById("name").value;
            socket.send("type = login&name = "+str1);
        });
        
        //核心部分，用来处理从服务端传来的各种信息
        socket.addEventListener("message",function(e){
            var value = getScript(e.data);
            var text;
            switch (value["result"]){
                case "error":
                    text = "<li>" + value["error"] + "<li>" +msg.innerHTML;
                    break;
                case "loginok":
                    document.getElementById("name").value = value["name"];
                    text = "<li>" + "登陆成功" +"<li>"+msg.innerHTML;
                    break;
                case "talk":
                    text = "<li>" + value["msg"] +"<li>"+msg.innerHTML;
                    break;
                case "removeuser":
                    removeUser(value["name"]);
                    break;
                case "setuserlist":
                    removeAllUser();
                    var list = value["list"].split(",");
                    for (var i = 0, l = list.length;i<l;i++){
                        addUser(list[i])
                    }
                    break;
            }
            if(text) msg.innerHTML = text;
        });

        socket.addEventListener("error",function(e){
            alert("error");
        });

        socket.addEventListener("close",function(e){
            msg.innerHTML = "<li>服务器断开</li>"+msg.innerHTML;
            document.getElementById("name").disabled = false;
            document.getElementById("openbtn").disaled = false;
            document.getElementById("closebtn").disabled = true;
        });

        msg.innerHTML = "<li>连接服务器成功</li>" + msg.innerHTML;
        document.getElementById("name").disabled = true;
        document.getElementById("openbtn").disaled = true;
        document.getElementById("closebtn").disabled =false;
    }

    function getScript(value){
        var valueArray = value.split("&");
        var arr;
        var scriptObj = {};
        for (var i in valueArray){
            arr = valueArray[i].split("=");
            scriptObj [arr[0]] = arr[1];
        }
        return scriptObj;
    }

    function removeAllUser(){
        var list = document.getElementById("to");
        for (var i = 0, l = list.length;i<l;i++){
            list.options.remove(1);
        }
    }

    function addUser(username){
        var list = document.getElementById("to");
        if (!isExitUser(list,username)){
            var item = new Option(username,username);
            list.options.add(item);
        }
    }

    function isExitUser(){
        var list = document.getElementById("to");
        var isExitUser =false;
        for (var i = 0; i< list.option.length;i++){
            if (list.options[i].value == username){
                isExitUser =true;
            }
        }
        return isExitUser;
    }

    function doClose(){
        if(socket.readyState == WebSocket.OPEN){
            socket.close();
        }
    }

    function doAction(){
        //判断是否链接成功
        if(socket.readyState == WebSocket.OPEN){
            var to  = document.getElementById("to").value ;
            var msg =  document.getElementById("message").value ;
            socket.send("type = talk&target="+to +"&msg="+msg);
            document.getElementById("message").value = "";
        }else{
            alert("服务器连接失败")
        }
        return false;
    }
</script>

</html>